<script>
  let isExpanded = false;
  
  const quiz = {
    title: "网络安全试题",
    question: "1. 以下哪种行为可能导致大数据中心遭受 SQL 注入攻击？（单选题）",
    options: [
      { label: "A.", text: "定期更新数据库系统" },
      { label: "B.", text: "对用户输入进行严格校验" },
      { label: "C.", text: "使用硬编码的 SQL 语句" },
      { label: "D.", text: "限制数据库用户权限" }
    ],
    correctAnswer: "C",
    explanation: "使用硬编码 SQL 语句，若未对用户输入过滤，易被注入恶意 SQL 代码；定期更新、严格校验输入、限制用户权限可防范攻击。"
  };

  function toggleExpansion() {
    isExpanded = !isExpanded;
  }
</script>

<div class="quiz-container">
  <div class="quiz-header" on:click={toggleExpansion}>
    <div class="quiz-icon">📄</div>
    <span class="quiz-title">{quiz.title}</span>
    <div class="expand-controls">
      <button class="control-btn">📋</button>
      <button class="control-btn">⬇</button>
      <button class="control-btn" class:rotated={isExpanded}>⤢</button>
    </div>
  </div>
  
  {#if isExpanded}
    <div class="quiz-content">
      <div class="question">
        {quiz.question}
      </div>
      
      <div class="options">
        {#each quiz.options as option}
          <div class="option">
            <span class="option-label">{option.label}</span>
            <span class="option-text">{option.text}</span>
          </div>
        {/each}
      </div>
      
      <div class="answer-section">
        <div class="correct-answer">
          【正确答案】{quiz.correctAnswer}
        </div>
        
        <div class="explanation">
          【答案解析】{quiz.explanation}
        </div>
      </div>
      
      <div class="quiz-footer">
        <div class="quiz-tag">📄 网络安全试题</div>
      </div>
    </div>
  {/if}
</div>

<style>
  .quiz-container {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    background: white;
    margin: 16px 0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }

  .quiz-header {
    display: flex;
    align-items: center;
    padding: 12px 16px;
    cursor: pointer;
    background: #f8f9fa;
    border-radius: 8px 8px 0 0;
    user-select: none;
  }

  .quiz-header:hover {
    background: #f0f1f2;
  }

  .quiz-icon {
    margin-right: 8px;
    font-size: 16px;
  }

  .quiz-title {
    flex: 1;
    font-size: 14px;
    font-weight: 500;
    color: #333;
  }

  .expand-controls {
    display: flex;
    gap: 4px;
  }

  .control-btn {
    background: none;
    border: none;
    padding: 4px;
    cursor: pointer;
    border-radius: 4px;
    font-size: 14px;
    color: #666;
    transition: all 0.2s ease;
  }

  .control-btn:hover {
    background: rgba(0, 0, 0, 0.1);
  }

  .control-btn.rotated {
    transform: rotate(45deg);
  }

  .quiz-content {
    padding: 20px;
    border-top: 1px solid #e0e0e0;
  }

  .question {
    font-size: 14px;
    line-height: 1.6;
    color: #333;
    margin-bottom: 16px;
  }

  .options {
    margin: 16px 0;
  }

  .option {
    display: flex;
    margin: 8px 0;
    font-size: 14px;
    line-height: 1.6;
  }

  .option-label {
    color: #333;
    font-weight: 500;
    margin-right: 4px;
    min-width: 20px;
  }

  .option-text {
    color: #333;
  }

  .answer-section {
    margin-top: 24px;
    padding-top: 16px;
  }

  .correct-answer {
    font-size: 14px;
    color: #333;
    margin-bottom: 12px;
    font-weight: 500;
  }

  .explanation {
    font-size: 14px;
    color: #666;
    line-height: 1.6;
    background: #f8f9fa;
    padding: 12px;
    border-radius: 4px;
    border-left: 3px solid #4285f4;
  }

  .quiz-footer {
    margin-top: 20px;
    padding-top: 16px;
    border-top: 1px solid #e0e0e0;
  }

  .quiz-tag {
    display: inline-flex;
    align-items: center;
    padding: 4px 8px;
    background: #e3f2fd;
    color: #1976d2;
    border-radius: 4px;
    font-size: 12px;
    border: 1px solid #bbdefb;
  }
</style>
